<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small" @keyup.enter.native="onSubmit">
      <el-form-item v-if="!form.id" label="菜单类型">
        <el-button-group>
          <el-button :type="!form.isApi ? 'primary':''" @click="form.isApi = false">菜单</el-button>
          <el-button :type="form.isApi ? 'primary':''" @click="form.isApi = true">权限</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-cascader
          v-model="form.parentId"
          :props="{ checkStrictly: true }"
          placeholder="选择所属菜单"
          style="width: 100%"
          :options="selectMenus"
          filterable
          clearable
        />
      </el-form-item>
      <el-form-item :label="form.isApi?'权限名称':'菜单名称'" prop="title">
        <el-input v-model="form.title" clearable placeholder="title" />
      </el-form-item>
      <el-form-item label="菜单类型" prop="title">
        <el-select v-model="form.type" placeholder="菜单类型" style="width: 100%">
          <el-option v-for="item in typeOptionList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="路径" prop="path">
        <el-input v-if="!form.isApi" v-model="form.path" clearable placeholder="path" />
        <el-autocomplete
          v-if="form.isApi"
          v-model="form.path"
          style="width: 100%"
          value-key="path"
          :fetch-suggestions="searchComponent"
          placeholder="path"
          clearable
          @select="selectComponent"
        />
      </el-form-item>
      <el-form-item :label="form.isApi?'名称':'组件名称'">
        <el-input v-if="form.isApi" v-model="form.name" clearable name="name" placeholder="name" />
        <el-autocomplete
          v-if="!form.isApi"
          v-model="form.name"
          style="width: 100%"
          value-key="name"
          :fetch-suggestions="searchComponent"
          placeholder="name"
          clearable
          @select="selectComponent"
        />
      </el-form-item>
      <el-form-item v-if="!form.isApi" label="组件路径">
        <!--          <el-input v-model="form.component" placeholder="/component/list" clearable></el-input>-->
        <el-autocomplete
          v-model="form.component"
          style="width: 100%"
          value-key="component"
          :fetch-suggestions="searchComponent"
          placeholder="component"
          clearable
          @select="selectComponent"
        />
      </el-form-item>
      <el-form-item label="权重" prop="weight">
        <el-input v-model.number="form.weight" type="number" clearable placeholder="weight,越大越靠前" />
      </el-form-item>
      <el-form-item v-if="!form.isApi" label="重定向">
        <el-input v-model="form.redirect" placeholder="/index" clearable />
      </el-form-item>
      <el-form-item v-if="!form.isApi" label="隱藏">
        <el-radio-group v-model="form.hidden">
          <el-radio-button label="true">是</el-radio-button>
          <el-radio-button label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
import componentData from '@/utils/component-data.js'
import { getMatchApiName } from '../../utils/const'

export default {
  name: 'MenuForm',
  props: ['form', 'selectMenus'],
  data() {
    return {
      isApi: false,
      typeOptionList: [{ label: '平台后台菜单', value: 0 }, { label: '商家后台菜单', value: 1 }],
      componentData: componentData,
      rules: {
        title: [{ required: true, message: '必填', trigger: 'blur' }],
        path: [{ required: true, message: '必填', trigger: 'blur' }]
      }
    }
  },
  watch: {
    form: function(newVal, oldVal) {

    }
  },
  created() {
    console.log(this.form)
  },
  methods: {
    selectComponent: function(item) {
      if (!this.form.isApi) {
        if (isEmpty(this.form.component)) {
          this.$set(this.form, 'component', item.component)
        }
        if (isEmpty(this.form.name)) {
          this.$set(this.form, 'name', item.name)
        }
        if (isEmpty(this.form.path)) {
          this.$set(this.form, 'path', item.component)
        }
        if (isEmpty(this.form.title)) {
          this.$set(this.form, 'title', item.name)
        }
      } else {
        if (isEmpty(this.form.name)) {
          let name = item.path.replace(/\//g, '.')
          if (name.startsWith('.')) {
            name = name.substring(1)
          }
          if (name.startsWith('api.')) {
            name = name.replace('api.', '')
          }
          if (isEmpty(this.form.title)) {
            this.$set(this.form, 'title', getMatchApiName(name))
          }
          this.$set(this.form, 'name', name)
        }
      }
    },
    selectBlur: function(e) {

    },
    searchComponent: function(queryString, cb) {
      if (this.form.isApi) {
        request({
          url: '/api/menu/request_path_list',
          data: { path: queryString }
        }).then(res => {
          const arr = []
          res.data.forEach(v => {
            arr.push({ path: v })
          })
          cb(arr)
        })
      } else {
        const restaurants = this.componentData
        if (!queryString) {
          cb(restaurants)
        } else {
          const results = restaurants.filter((v) => {
            return v.component.toLowerCase().includes(queryString.toLowerCase()) || v.name.toLowerCase().includes(queryString.toLowerCase())
          })
          cb(results)
        }
      }
    },
    onSubmit: function(fn) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.children = null

          // console.log(this.form.parentId)
          if (this.form.parentId != undefined && this.form.parentId.length > 0) {
            this.form.parentId = this.form.parentId[this.form.parentId.length - 1]
          }
          if (this.form.isApi) {
            this.form.component = ''
            this.form.redirect = ''
          }
          request({
            url: '/api/menu/save',
            method: 'post',
            data: this.form
          }).then(res => {
            this.$message({ message: '操作成功', type: 'success' })
            this.$emit('close') // 调用父组件中的方法
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
